<template>
	<view class="pay">
		<div class="top">
			<div class="title">支付金额</div>
			<div class="price">
				￥
				<div class="num">{{ orderInfo.money }}</div>
			</div>
		</div>

		<div class="center">
			<div class="text">选择付款方式</div>
			<div class="list">
				<u-radio-group style="display: block" v-model="orderInfo.pay_type" @change="radioGroupChange">
					<div class="item" v-for="item in list" :key="item.name">
						<div class="left">
							<image :src="item.icon" alt="" />
							<div class="name">{{ item.name }}</div>
						</div>
						<u-radio :name="item.value" :disabled="item.disabled"></u-radio>
					</div>
				</u-radio-group>
			</div>
		</div>
		<div class="btn"><u-button size="default" @click="buyNow" type="primary" shape="circle">立即购买</u-button></div>
		<!-- 键盘 -->
		<u-keyboard ref="uKeyboard" :tooltip="false" @change="valChange" @backspace="backspace" mode="number"
			v-model="show">
			<view slot="default">
				<view style="text-align: center;">请输入密码</view>
				<div><u-message-input @finish="finish" v-model="value" :dot-fill="true" :maxlength="6"
						mode="box"></u-message-input></div>
			</view>
		</u-keyboard>

		<u-modal v-model="showModal" content="您还没有设置交易密码"></u-modal>
	</view>
</template>

<script>
import { wxPay, pay } from '@/common/utils/index';
export default {
	data() {
		return {
			showModal: false,
			value: '', //mima
			show: false,
			// #ifdef MP-WEIXIN
			list: [
				{
					disabled: false,
					name: '余额支付',
					value: 'deposit',
					icon: '/static/icons/ye_pay.png'
				},
				{
					disabled: false,
					name: '微信支付',
					value: 'wechat1',
					icon: '/static/icons/wx_pay.png'
				}
			],

			// #endif

			// #ifndef MP-WEIXIN
			list: [
				{
					disabled: false,
					name: '余额支付',
					value: 'deposit',
					icon: '/static/icons/ye_pay.png'
				},
				{
					disabled: false,
					name: '微信支付',
					value: 'wechat1',
					icon: '/static/icons/wx_pay.png'
				},
				{
					disabled: false,
					name: '支付宝支付',
					value: 'alipay',
					icon: '/static/icons/zfb_pay.png'
				}
			],

			// #endif


			orderInfo: {
				money: '',
				pay_type: 'deposit',
				target: '',
				target_type: '',
				tradepwd: ''
			}
		};
	},
	onLoad() {
		this.page = this.getOpenerEventChannel();
		this.page.on('orderInfo', data => {
			console.log(data.order);
			this.orderInfo = data.order;
		});
	},
	methods: {
		radioGroupChange(e) {
			console.log(this.orderInfo.pay_type);
		},
		buyNow() {
			if (this.orderInfo.pay_type === 'deposit') {
				this.show = true;
			} else {
				// #ifdef APP-PLUS
				this.$u.api.pay(this.orderInfo).then(payRes => {
					if (payRes.code === 1) {
						if (this.orderInfo.pay_type === 'wechat1') {
							this.orderInfo.pay_type = 'wxpay';
						}
						wxPay(payRes.data.payParams, this.orderInfo.pay_type).then(res => {
							console.log(res);
						});
					}
				});
				// #endif

				// #ifdef MP-WEIXIN
				this.$u.api.pay({ ...this.orderInfo, pay_type: 'miniapp1' }).then(payRes => {
					if (payRes.code === 1) {
						wxPay(payRes.data.payParams, this.orderInfo.pay_type).then(res => {
							console.log(res);
						});
					}
				});
				// #endif
			}
		},
		pay() {
			console.log(this.orderInfo);
			this.$u.api.pay(this.orderInfo).then(payRes => {
				if (payRes.code === 1) {
					this.$u.toast(payRes.msg);
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						});
					}, 800);
				}
			});
		},
		valChange(e) {
			console.log(this.value.length);
			if (this.value.length < 5) {
				this.value += e;
			} else {
				this.value += e
				this.finish();
			}
		},
		backspace(e) {
			if (this.value.length) this.value = this.value.substring(0, this.value.length - 1);

		},
		finish(e) {
			console.log(this.value);
			this.orderInfo.tradepwd = this.value;
			this.show = false;
			this.pay();
			this.value = '';
		}
	}
};
</script>

<style lang="scss" scoped>
.pay {
	height: 100vh;
	margin: 0 20rpx;
}

.top {
	margin-top: 50rpx;

	.title {
		font-size: 30rpx;
		text-align: center;
		color: #929292;
	}

	.price {
		vertical-align: text-bottom;
		margin-top: 20rpx;
		@include flex($aligin: center, $justify: center);

		.num {
			font-weight: bold;

			font-size: 60rpx;
		}
	}
}

.center {
	margin-top: 100rpx;

	.text {
		font-weight: 500;
		margin-bottom: 20rpx;
	}

	.list {
		background-color: #f6f6f6;
		border-radius: 20rpx;

		.item {
			@include flex($justify: space-between, $aligin: center);
			padding: 30rpx 20rpx;
			border-bottom: 4rpx solid #fff;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.left {
				@include flex($aligin: center);
			}
		}
	}
}

.btn {
	position: fixed;
	bottom: 40rpx;
	width: 95%;
}
</style>
